<template>
	<view class="container">
		<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="100">
			<u-form-item required prop="projectName" label="项目名称" borderBottom key="projectName" @click="$commonFn.Navto(`/pages/project/index`)">
				<u--input style="pointer-events: none;" v-model="formData['projectName']" border="none"
					inputAlign='right' placeholder="请选择项目名称" suffixIcon="arrow-right" readonly
					:suffixIconStyle="{color:'rgb(192, 196, 204)'}"></u--input>
			</u-form-item>
			<u-form-item required prop="productNo" label="工号" borderBottom key="productNo" @click="$commonFn.Navto(`/pages/product/index?pageType=2`)">
				<u--input style="pointer-events: none;" v-model="formData['productNo']" border="none" inputAlign='right'
					placeholder="请选择项目名称" suffixIcon="arrow-right" readonly
					:suffixIconStyle="{color:'rgb(192, 196, 204)'}" ></u--input>
					
			</u-form-item>
			<u-form-item :required="item.required" :prop="item.prop" :label="item.label" borderBottom
				v-for="(item,index) in formList" :key="item.prop" :labelPosition="item.type==='image' ? 'top' : ''">
				<block v-if="item.type==='input'">
					<u--input v-model="formData[item.prop]" border="none" :placeholder="`请输入${item.label}`"
						inputAlign='right'></u--input>
				</block>
				<block v-else-if="item.type==='textarea'">
					<u--textarea :confirmType="null" v-model="formData[item.prop]" border="none" :placeholder="`请输入${item.label}`"
						inputAlign='right'></u--textarea>
				</block>
				<view v-else-if="item.type==='select'" @click="handleSelectIpt(item)" style="width: 100%;">
					<u--input style="pointer-events: none;" v-model="formData[item.prop]" border="none"
						inputAlign='right' :placeholder="`请选择${item.label}`" suffixIcon="arrow-right" readonly
						:suffixIconStyle="{color:'rgb(192, 196, 204)'}"></u--input>
				</view>
				<view v-else-if="item.type==='dict'" @click="handleSelectIpt(item)"
					style="width: 100%;text-align: right;display: flex;justify-content: end;">
					<dicts-tag :list="dictList[item.dictType]" :value="formData[item.prop]"></dicts-tag>

					<u--input v-if="!formData[item.prop]" style="pointer-events: none;" v-model="formData[item.prop]"
						border="none" inputAlign='right' :placeholder="`请选择${item.label}`" suffixIcon="arrow-right"
						readonly :suffixIconStyle="{color:'rgb(192, 196, 204)'}"></u--input>
				</view>
				<view v-else-if="item.type==='pick'" @click="handleSelectIpt(item)"
					style="width: 100%;text-align: right;display: flex;justify-content: end;">
					<uni-data-picker v-model="formData[item.prop]" :localdata="treeData"
						popup-title="请选择问题"></uni-data-picker>
				</view>
				<block v-else-if="item.type==='date'">
					<uni-datetime-picker type="date" @change="$refs.uForm.validateField(item.prop)" :clear-icon="true"
						v-model="formData[item.prop]" />
				</block>
				<block v-else-if="item.type==='image'">
					<file-upload style="margin-top: 12px;" @updataFile="updataImage"></file-upload>
				</block>
			</u-form-item>

		</u--form>


		<bottom-button @click="submit"></bottom-button>
	</view>
</template>

<script>
	import {
		getDicts,
		getProblemType,
		addProblem
	} from "@/common/api.js"
	import bottomButton from "@/components/bottomButton.vue"
	import fileUpload from "@/components/fileUpload.vue"
	import dictsTag from "@/components/dictsTag.vue"
	import dicts from '@/mixins/dicts.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		mixins: [dicts],
		components: {
			bottomButton,
			fileUpload,
			dictsTag
		},
		computed: {
			...mapState('problemInfo', [
				'projectInfo', // 映射整个projectInfo对象
				'productInfo' // 映射整个productInfo对象
			]),
		},
		data() {
			return {
				single: '',
				value: '',
				progressShow: false,
				typeName: '', //
				params: {},
				fileList1: [],
				formData: {

					productNo: "", //工号
					projectName: "", //项目名称
					

					problemTypeId: '', // 问题类型

					requireDate: '', // 要求完成日期
					problemDesc: '', // 问题描述
					upload_file1: '', // 


					upload_file1: [],

					productId: '',
					projectId: '',
					
					problemCause:''


				},
				formList: [
					// {
					// 	label: '工号',
					// 	prop: 'productNo',
					// 	type: 'select',
					// 	status: 'normal',
					// 	required: true,
					// 	url: '/pages/product/index?pageType=2'
					// },
					// {
					// 	label: '项目名称',
					// 	prop: 'projectName',
					// 	type: 'select',
					// 	status: 'normal',
					// 	required: true,
					// 	url: '/pages/product/index'
					// },
					// {
					// 	label: '产品类型',
					// 	prop: 'productType',
					// 	type: 'dict',
					// 	status: 'normal',
					// 	required: true,
					// 	dictType: 'service_product_type',
					// 	url: '/pages/product/index'
					// },
					// {
					// 	label: '型号',
					// 	prop: 'model',
					// 	type: 'select',
					// 	status: 'normal',
					// 	required: true,
					// 	url: '/pages/product/index'
					// },
					// {
					// 	label: '电压等级',
					// 	prop: 'voltageLevel',
					// 	type: 'dict',
					// 	status: 'normal',
					// 	required: true,
					// 	dictType: 'service_voltage_type',
					// 	url: '/pages/product/index'
					// },
					{
						label: '问题类型',
						prop: 'problemTypeId',
						type: 'pick',
						status: 'normal',
						required: true
					},
					{
						label: '要求完成日期',
						prop: 'requireDate',
						type: 'date',
						status: 'normal',
						required: true
					},
					// {
					// 	label: '现处单号', // 派单
					// 	prop: 'currentTrackingCode',
					// 	type: 'input',
					// 	status: 'normal',
					// 	required: false
					// },
					{
						label: '问题描述',
						prop: 'problemDesc',
						type: 'textarea',
						status: 'normal',
						required: true
					},
					{
						label: '问题原因',
						prop: 'problemCause',
						type: 'textarea',
						status: 'normal',
						required: true
					},
					{
						label: '现场图片',
						prop: 'upload_file1',
						type: 'image',
						status: 'normal',
						required: true
					},
				],


				rules: {
					productNo: [{
						required: true,
						message: '请选择工号',
						trigger: ['blur', 'change']
					}],
					projectName: [{
						required: true,
						message: '请选择项目名称',
						trigger: ['blur', 'change']
					}],
					
					problemTypeId: [{
						required: true,
						message: '请选择问题类型',
						trigger: ['blur', 'change']
					}],
					

					requireDate: [{
						required: true,
						message: '请选择要求日期',
						trigger: ['blur', 'change']
					}],
					problemDesc: [{
						required: true,
						message: '请输入问题描述',
						trigger: ['blur', 'change']
					}],
					problemCause: [{
						required: true,
						message: '请输入问题原因',
						trigger: ['blur', 'change']
					}],

					upload_file1: {
						type: 'array',
						required: true,
						min: 1,
						message: '请上传图片',
						trigger: ['change']
					},
				},
				departmentId: '',
				phraseList: [],
				dictList: {},
				treeData: {},
				userInfo: {},
			}
		},
		onLoad(e) {
	

		},
		onShow() {
			let that = this
			this.userInfo = uni.getStorageSync('userInfo')

			this.getDictsList('service_product_type')
			this.getDictsList('service_voltage_type')
			this.getProblemList()

			this.formData.projectName = this.projectInfo.projectName;
			this.formData.projectId = this.projectInfo.projectId;
			this.formData.projectLeader = this.projectInfo.projectLeader;

			this.formData.productNo = this.productInfo.map(item => item.productNo).join(',')
			this.formData.productId = this.productInfo.map(item => item.productId).join(',')

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			async getProblemList() {
				let that = this
				let res = await getProblemType()
				if (res.code == '00000') {
					// let tree =  this.arrayToTree(res.data)	
					// console.log(res.data,'res.data');
					// console.log(tree,'tree');
					let data = res.data
					const map = new Map();
					const rootList = [];
					data.forEach(item => {
						item.children = item.level < 3 ? item.children || [] : null;
						item.text = item.categoryName;
						item.value = item.categoryId;
						map.set(item.categoryId, item);
					});
					data.forEach(item => {
						const parent = map.get(item.parentId);
						if (parent) {
							parent.children.push(item)
						} else {
							if (item.parentId === '0') {
								rootList.push(item)
							}
						}
					})
					that.treeData = rootList
					// console.log(rootList,'rootList');

				}
			},

			async getDictsList(dictType) {
				let res = await getDicts({
					dictType: dictType
				})
				if (res) {
					this.dictList[dictType] = res.data
				}
			},
			handleSelectIpt(item) {
				console.log(item);
				if (item.url) this.$commonFn.Navto(item.url)
			},
			submit() {
				let that = this

				this.$refs.uForm.validate().then(res => {
					let params = JSON.parse(JSON.stringify(that.formData))
					params['problem_info_file'] = params['upload_file1'].map(item => item.fileId).join(',')

					params['problemStatus'] = '2'
					params['problemSource'] = '移动端'
					params['serviceObject'] = '1'
					params['feedbackMobile'] = this.userInfo.mobile
					params['bizType'] = 'problem_info_file'
					uni.showModal({
						title: '提示',
						content: '确认是否提交',
						success: function(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '数据提交中',
									mask: true
								});
								addProblem(params).then(ord => {
									that.$commonFn.msg('提交成功')
									uni.hideLoading();
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index/index'
										});
									}, 500);
								}).catch(err => {
									console.log(err, 'err')
									uni.hideLoading();
								})
							}
						}
					});


				}).catch(errors => {
					console.log(errors, 'errors')
				})
			},
			updataImage(e) {
				// console.log(e,'eee');
				this.formData.upload_file1 = e
				this.$refs.uForm.validateField('upload_file1')
			},
			updataVideo(e) {
				this.formData.fileIds = e
				this.$refs.uForm.validateField('fileIds')
			},
		},
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	::v-deep .uni-textarea-textarea {
		text-align: right !important;
	}

	::v-deep .uni-textarea-placeholder {
		text-align: right;
	}

	::v-deep .u-form-item__body__right__message {
		text-align: right !important;
	}

	::v-deep .u-textarea__field {
		text-align: right !important;
	}


	.container {
		padding: 32rpx;
	}
</style>